<script setup>
defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 5
  },
  total: {
    type: Number,
    default: 0
  },
  pageSizes: {
    type: Array,
    default: () => [2, 3, 5, 10]
  },
  layout: {
    type: String,
    default: 'jumper, total, sizes, prev, pager, next'
  }
})

const emits = defineEmits(['update:currentPage', 'update:pageSize', 'change'])

/**
 * page-size 每页显示条目个数改变时触发
 * @param pageSize {Number} 每页显示条目个数
 */
const sizeChange = (pageSize) => {
  // 当更改每页显示条目个数时  重置当前页为 1
  emits('update:currentPage', 1)
  emits('update:pageSize', pageSize)
}

/**
 * current-page 当前页数改变时触发
 * @param currentPage {Number} 当前页数
 */
const currentChange = (currentPage) => {
  emits('update:currentPage', currentPage)
}

/**
 * current-page 或 page-size 更改时触发
 */
const change = () => {
  emits('change')
}
</script>

<template>
  <!-- 这里使用了一个 v-bind="$attrs" 这样的一个属性，它可以把外面 props 直接传递到 el-pagination 组件中 也可以删除 -->
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    :layout="layout"
    :page-sizes="pageSizes"
    v-bind="$attrs"
    @change="change"
    @size-change="sizeChange"
    @current-change="currentChange"
  />
</template>
